<template>
	<BasicContainer :navigators="['一级菜单', '二级菜单', '三级菜单']" :title="'TAPD项目管理'">
		<div style="width:1300px;">
			<a-form layout="inline">
				<a-row style="margin-bottom:15px">
					<a-col :span="6">
						<a-form-item label="项目名称">
							<a-input placeholder="请输入" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="项目ID">
							<a-input placeholder="请输入" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="是否已关联ITPM项目" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
							<a-select style="width: 180px" placeholder="请选择">
								<a-select-option value="0">
									是
								</a-select-option>
								<a-select-option value="1">
									否
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row>
					<a-col :span="8">
						<a-button type="primary" style="margin-left:70px">
							<a-icon type="search" />搜索
						</a-button>
						<a-button style="margin-left: 10px;">
							<a-icon type="reload" />重置
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<a-table :columns="columns" style="margin-top: 16px" :locale="locale" :dataSource="tableData"
			:rowKey="(record, index) => index" :pagination="tablePagination">
			<template slot="name" slot-scope="text,record">
				<a-tooltip placement="top" v-if="record.name">
					<template slot="title">
						<span>{{ record.name }}</span>
					</template>
					<span style="cursor:default">{{ record.name }}</span>
				</a-tooltip>
				<span v-else-if="!record.name">—</span>
			</template>
			<template slot="relevancedTapd" slot-scope="text,record">
				<a-tooltip placement="top" v-if="record.relevancedTapd">
					<template slot="title">
						<p>{{ record.relevancedTapd }}</p>
					</template>
					<span style="cursor:default">{{ record.relevancedTapd }}</span>
				</a-tooltip>
				<span v-else-if="!record.relevancedTapd">—</span>
			</template>
		</a-table>
	</BasicContainer>
</template>
<script>
import EmptyWrap from '@/components/emptyWrap';
export default {
	data() {
		return {
			locale: {//默认文案设置，目前包括排序、过滤、空数据文案
				emptyText: <EmptyWrap text="暂无相关数据" type="file-search"></EmptyWrap>
			},
			tablePagination: {//主页表格的分页器
				showQuickJumper: true,//是否可以快速跳转至某页
				showSizeChanger: true,//是否可以改变 pageSize
			},
			columns: [
				{
					title: "项目名称",
					dataIndex: "name",
					scopedSlots: { customRender: 'name' },
				},
				{
					title: "项目ID",
					dataIndex: "projectId",
					customRender:(text,record)=>{
						return record.projectId?record.projectId:'—';
					},
				},
				{
					title: "创建时间",
					dataIndex: "createTime",
					customRender:(text,record)=>{
						return record.createTime?record.createTime:'—';
					},
				},
				{
					title: "是否已关联ITPM项目",
					dataIndex: "booleanRelevanceTapd",
					customRender:(text,record)=>{
						return record.booleanRelevanceTapd?record.booleanRelevanceTapd:'—';
					},
				},
				{
					title: "已关联ITPM项目",
					dataIndex: "relevancedTapd",
					scopedSlots: { customRender: 'relevancedTapd' },
				},
			],
			tableData: [
				{
					name: "项目1",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目2",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目3",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目4",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目5",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目6",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目7",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目8",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目9",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目10",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
				{
					name: "项目11",
					projectId: 1234,
					createTime: 2022,
					booleanRelevanceTapd: "是",
					relevancedTapd: "关联项目1",
				},
			],
		}
	},
	computed: {},
	methods: {

	},

}
</script>
<style scoped>
</style>